<template>
    <div class="pay" v-loading="page_loading">
      <div class="block" style="margin-bottom: 10px">
        <el-date-picker
          v-model="begin_time"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <span class="auxiliary">到</span>
        <el-date-picker
          v-model="end_time"
          type="datetime"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <div class="input-wrapper">
          <el-input v-model="mer_order_no" placeholder="请输入订单号"></el-input>
        </div>
        <div class="input-wrapper">
          <el-input v-model="merchant_no" placeholder="请输入商户号"></el-input>
        </div>
        <div class="input-wrapper">
          <el-input v-model="channel_name" placeholder="请输入渠道名"></el-input>
        </div>
        <div class="select">
          <el-select v-model="order_status" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </div>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="danger" @click="down">下载</el-button>
      </div>
      <div class="count-wrapper" v-show="tableData && tableData.length">
        <Count :count_data="{
          totle: totle, // 总笔数
          totle_suc: totle_suc, // 成功笔数
          sum: sum, // 总金额
          sum_suc: sum_suc // 成功总额
        }"></Count>
      </div>
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="count"
            label="序号"
            align="center"
            width="80"
          >
            <template slot-scope="scope">
              {{(scope.$index + 1) + (page - 1) * offset}}
            </template>
          </el-table-column>
          <el-table-column
            prop="merchant_no"
            label="商户号"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="mer_order_no"
            label="商户订单号"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="channel_name"
            label="渠道"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="amount"
            label="付款金额(元)"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="trade_status"
            label="交易状态"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="mer_fee"
            label="商户费率"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="mer_fee_amount"
            label="商户费率金额(元)"
            align="center"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="mer_order_time"
            label="订单时间"
            align="center"
            width="160"
          >
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-wrapper" v-show="tableData && tableData.length">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="offset"
        >
        </el-pagination>
      </div>
    </div>
</template>

<script>
    import Count from '../Count/Count.vue';
    export default {
      name: "pay",
      data(){
          return{
            tableData: [],
            begin_time:'',
            end_time:'',
            options2: [{
              value: 0,
              label: '全部'
            }, {
              value: 'TRADE_SUCCESS',
              label: '已支付'
            }, {
              value: 'UNPAID',
              label: '未支付'
            }, {
              value: 'REFUND',
              label: '已退款'
            }, {
              value: 'CLOSED',
              label: '已关闭'
            }, {
              value: 'OTHER',
              label: '其他'
            }],
            order_status: 0, // 订单状态
            mer_order_no: '', // 订单号
            merchant_no: '', // 商户号
            channel_name: '', // 渠道号
            page_loading: true, // 是否在请求表单数据
            trade_status: {
              TRADE_SUCCESS: '已支付',
              UNPAID: '未支付',
              REFUND: '已退款',
              CLOSED: '已关闭',
              OTHER: '其他'
            },
            transfer: { // 筛选条件中转变量
              begin_time: '',
              end_time: '',
              mer_order_no: '',
              merchant_no: '',
              trade_status: '',
              channel_name: ''
            },
            total: 0, // 页面
            offset: 10, // 一页显示多少条
            page: 1, // 第几页
            totle: 0, // 总笔数
            totle_suc: 0, // 成功笔数
            sum: 0, // 总金额
            sum_suc: 0 // 成功总额
          }
      },
      components: {
        Count
      },
      created () {
        // 初始化表格
        this.send_table_data();
      },
      methods:{
        handleCurrentChange (val) {
          this.page = val; // 传递多少页
          this.send_table_data();
        },
        down () {
          window.location.href = `${this.default_url}admin/index/exportExcel?biz_type=1&token=${localStorage['token']}&begin_time=${this.transfer.begin_time}&end_time=${this.transfer.end_time}&mer_order_no=${this.transfer.mer_order_no}&merchant_no=${this.transfer.merchant_no}&trade_status=${this.transfer.trade_status}&channel_name=${this.transfer.channel_name}`;
        },
        query () {
          console.log(1);
          // 将表单的值赋值给中转变量
          this.transfer.begin_time = this.begin_time;
          this.transfer.end_time = this.end_time;
          this.transfer.mer_order_no = this.mer_order_no;
          this.transfer.merchant_no = this.merchant_no;
          this.transfer.trade_status = this.order_status;
          this.transfer.channel_name = this.channel_name;

          this.page = 1;

          this.send_table_data();
        },
        send_table_data () {
          this.get_table_data({
            biz_type: 1,
            page: this.page,
            offset: this.offset,
            token: localStorage['token'],
            begin_time: this.transfer.begin_time, // 开始
            end_time: this.transfer.end_time, // 结束
            mer_order_no: this.transfer.mer_order_no, // 订单号
            merchant_no: this.transfer.merchant_no, // 商户号
            trade_status: this.transfer.trade_status, // 状态
            channel_name: this.transfer.channel_name // 渠道号
          });
        },
        get_table_data (option) { // 获取表格数据
          // 显示加载框
          this.page_loading = true;
          // 请求ajax
          this.axios.post('admin?action=order', option).then((res) => {
            // 关闭加载框
            this.page_loading = false;
            if (res.data.code === 1) {
              // 数据需要过滤
              res.data.data.forEach((item) => {
                item.trade_status = this.trade_status[item.trade_status];

                // 金额分转元
                item.amount = Number(item.amount) ? item.amount / 100 : 0;
                item.mer_fee_amount = Number(item.mer_fee_amount) ? item.mer_fee_amount / 100 : 0;
              });
              this.tableData = res.data.data;

              // 总条数
              this.total = res.data.totle;

              // 赋值上面统计
              this.totle =  res.data.totle; // 总笔数
              this.totle_suc = res.data.totle_suc; // 成功笔数
              this.sum = Number(res.data.sum) ? res.data.sum / 100 : 0; // 总金额
              this.sum_suc = Number(res.data.sum_suc) ? res.data.sum_suc / 100 : 0; // 成功总额

              return false;
            }
            if (res.data.code === -3 || res.data.code === -4 || res.data.code === -2) {
              // 删除token缓存
              localStorage['token'] = '';

              // 跳转到登录
              this.$router.replace({
                path: '/login'
              });

              return false;
            }

            this.tableData = [];
          }).catch(() => {

          });

        }
      }
    }
</script>

<style scoped>
  .pay {
    padding-bottom: 60px;
  }
  .block{
    padding: 20px 0 20px 20px;
    background-color: #e8e8e8;
  }
  .select{
    width: 140px;
    display: inline-block;
    vertical-align: top;
  }
  .select > .form-control {
    height: 40px;
  }
  .auxiliary {
    font-size: 14px;
  }
  .table-wrapper {
    padding: 0 20px;
  }
  .pagination-wrapper {
    margin: 0 20px;
    padding: 20px 0;
    text-align: center;
    background-color: #fff;
  }
  .input-wrapper {
    display: inline-block;
    width: 140px;
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 192px;
  }
</style>
